<template>
	<view class="page">
		<view class="group_2">
			<view class="" style="width: 100%;height: 1rpx;background-color: #dedede;"></view>
			<view class="group_3">
				<text lines="1" class="text_2">选择会员</text>
				<view class="section_1" @click="xzclick">
					<view class="box_3">
						<image
							src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/085daf5db91a498e8c78611923004528_mergeImage.png"
							class="label_1"></image>
						<image
							src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/085daf5db91a498e8c78611923004528_mergeImage.png"
							class="label_2"></image>
						<image
							src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/085daf5db91a498e8c78611923004528_mergeImage.png"
							class="label_3"></image>
					</view>
					<view class="image-text_1">
						<text lines="1" class="text-group_1">共3名会员</text>
						<image
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/6508a8b599f77dec7de702cf655b10351b025310.png"
							class="icon_2"></image>
					</view>
				</view>

				<text lines="1" class="text_8">优惠券类型</text>
				<view class="item" style="border-bottom: solid 2rpx #efefef;">
					<view class="flex-space-between week-list">
						<view class="week-item" :class="{'active':index === selectItemId}"
							v-for="(item,index) in weekList" :key="index" @click="noticesSelect(item,index)">
							{{item.name}}
						</view>
					</view>
				</view>

				<!-- 
				<text lines="1" class="text_8">优惠券类型</text>
				<view class="item" style="border-bottom: solid 2rpx #efefef;">
					<view class="flex-space-between week-list">
						<view class="week-item" :class="{'active1':weekSelect.includes(item)}" v-for="item in weekList"
							:key="item" @click="handSelect(item)">
							{{item.name}}
						</view>
					</view>
				</view> -->
				<!-- <u-radio-group v-model="checked" v-if="wrapperlist.length" @change="groupChange"> -->
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="list-1">
					<view class="item flex-align" v-for="item in wrapperlist" :key="item.id">
						<!-- 折扣券1 -->
						<view class="item-1">
							<view class="price"> ￥<text>{{item.money}}</text> </view>
							<view class="price-1">满500元可用</view>
						</view>
						<view class="item-2">
							<view class="info-1">满减券</view>
							<view class="info-2">有效期至：2022-10-20</view>
						</view>
						<view class="item-3">
							<view class="radio" :class="{ checked: item.id === checked }">
								<u-radio-group v-model="checked"  @change="groupChange">
									<u-radio :name="item.id" @change="radioChange(item)"></u-radio>
								</u-radio-group>
							</view>
						</view>
						<!-- 满减券2 -->
						<!-- <view class="item-1" v-if="item.type == 2">
									<view class="price"> ￥<text>{{ item.jian }}</text> </view>
									<view class="price-1">满{{ item.man }}元可用</view>
								</view>
								<view class="item-2" v-if="item.type == 2">
									<view class="info-1">{{ item.name }}</view>
									<view class="info-2">有效期至：{{ item.expire_time }}</view>
								</view> -->
						<!-- 折扣券3 -->
						<!-- <view class="item-1" v-if="item.type == 3">
									<view class="price"> {{ item.jian }}折</view>
									<view class="price-1">满{{ item.man }}元可用</view>
								</view>
								<view class="item-2" v-if="item.type == 3">
									<view class="info-1">{{ item.name }}</view>
									<view class="info-2">有效期至：{{ item.expire_time }}</view>
								</view> -->
					</view>
				</scroll-view>
				<!-- </u-radio-group> -->



				<text lines="1" class="text_8">发送时间</text>
				<view class="item" >
					<view class="flex-space-between week-list">
						<view class="week-item" :class="{'active2':timeSelect.includes(item)}" v-for="item in timeList"
							:key="item" @click="timesSelect(item)">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<button bindtap="onClick" class="button_3">
				邀请到店体验
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: 1,
				weekList: [{
					name: '现金券',
					id: '1'
				}, {
					name: '折扣券',
					id: '2'
				}, {
					name: '满减券',
					id: '3'
				}],
				weekSelect: [], //选中的
				noticeList: [{
					name: '优惠券',
					id: '1'
				}, {
					name: '积分',
					id: '2'
				}, {
					name: '商品',
					id: '3'
				}],
				noticeSelect: [], //选中的
				timeList: [{
					name: '即时发送',
					id: '1'
				}],
				timeSelect: [], //选中的
				selectItemId: 0,
				wrapperlist: [{
						money: '100',
						id: 1
					},
					{
						money: '100',
						id: 2
					},
					{
						money: '100',
						id: 3
					},
					{
						money: '100',
						id: 4
					},
					{
						money: '100',
						id: 5
					}
				],
			}
		},
		onLoad() {

		},
		methods: {
			groupChange(n) {
			},
			radioChange(item, n) {
				this.checked = item.id
			},
			xzclick() {
				uni.navigateTo({
					url: '../member_profile/select_members'
				})
			},
			// 发送渠道
			handSelect(data) {
				if (this.weekSelect.includes(data)) {
					this.weekSelect = this.weekSelect.filter((item) => {
						return item !== data
					})
				} else {
					this.weekSelect.push(data)
				}
			},
			noticesSelect(item, index) {
				this.selectItemId = index
			},
			timesSelect(data) {
				if (this.timeSelect.includes(data)) {
					this.timeSelect = this.timeSelect.filter((item) => {
						return item !== data
					})
				} else {
					this.timeSelect.push(data)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100vh;
		background-color: #dedede;

		.group_3 {
			background-color: rgba(255, 255, 255, 1.000000);
			width: 710rpx;
			height: 90vh;
			display: flex;
			flex-direction: column;
			margin: 20rpx 0 0 20rpx;

			.list-1 {
				height: 50vh;
				overflow: auto;
				padding-bottom: 30rpx;
				background-color: #f7f7fa;

				.item {
					margin-top: 30rpx;
					height: 140rpx;
					padding: 0px 80rpx 0px 30rpx;
					overflow: hidden;

					.item-1 {
						background: #ffffff;
						width: 35%;
						height: 100%;
						display: flex;
						border-radius: 9px 0 0 9px;
						flex-direction: column;
						align-items: center;
						border-right: 1px dashed #efeff1;
						justify-content: center;
						position: relative;

						&::before {
							position: absolute;
							content: "";
							width: 35rpx;
							height: 30rpx;
							background-color: #f7f7fa;
							border-radius: 50%;
							top: -15rpx;
							right: -15rpx;
						}

						&::after {
							position: absolute;
							content: "";
							width: 35rpx;
							height: 30rpx;
							background-color: #f7f7fa;
							border-radius: 50%;
							bottom: -15rpx;
							right: -15rpx;
						}

						.price {
							font-size: 26rpx;
							font-weight: 500;
							color: #ff1c1c;

							text {
								font-size: 40rpx;
								font-weight: 700;
							}
						}

						.price-1 {
							font-size: 22rpx;
							font-weight: bold;
							color: #ff1c1c;
							margin-top: 10rpx;
						}
					}

					.item-2 {
						background: #ffffff;
						width: 0;
						flex: 1;
						height: 100%;
						display: flex;
						border-radius: 0 9px 9px 0;
						flex-direction: column;
						justify-content: center;
						padding-left: 40rpx;
						position: relative;

						&::before {
							position: absolute;
							content: "";
							width: 35rpx;
							height: 30rpx;
							background-color: #f7f7fa;
							border-radius: 50%;
							top: -15rpx;
							left: -15rpx;
						}

						&::after {
							position: absolute;
							content: "";
							width: 35rpx;
							height: 30rpx;
							background-color: #f7f7fa;
							border-radius: 50%;
							bottom: -15rpx;
							left: -15rpx;
						}

						.info-1 {
							font-size: 28rpx;
							font-weight: bold;
							color: #000000;
						}

						.info-2 {
							font-size: 24rpx;
							font-weight: bold;
							color: #bebebe;
							margin-top: 20rpx;
						}

						.radio {
							position: absolute;
							right: 15rpx;
						}
					}

					.item-3 {
						// width: 0;
						// flex: 1;
						// height: 100%;
						// display: flex;
						// flex-direction: column;
						// justify-content: center;
						// padding-left: 40rpx;
						// position: relative;

						.radio {
							position: absolute;
							right: 15rpx;
						}
					}
				}
			}

			.item {
				// padding: 29rpx 30rpx 30rpx;
				padding: 25rpx 30rpx 20rpx 30rpx;

				.item-title {
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					font-weight: 500;
					margin-bottom: 20rpx;
				}

				.value {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 500;
				}

				.time-cell {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 500;
					justify-content: flex-start;

					.time {
						width: 49%;

						&:last-of-type {
							margin-left: 20rpx;
						}
					}
				}

				.week-list {
					display: grid;
					grid-template-columns: repeat(5, 1fr);
					grid-gap: 20rpx;
					position: relative;

					.week-item {
						padding: 15rpx 0;
						background-color: rgb(243, 243, 243);
						border-radius: 5rpx;
						text-align: center;
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						font-weight: 500;
						border: solid 2rpx transparent;
						box-sizing: border-box;
					}

					.active {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;

						// &:before {
						// 	display: block;
						// 	content: '';
						// 	position: absolute;
						// 	width: 27rpx;
						// 	height: 28rpx;
						// 	right: -2rpx;
						// 	bottom: -2rpx;
						// 	background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/46b1cc85fcb0fd76095daf823b7d2bb4a3235519.png");
						// 	background-repeat: no-repeat;
						// 	background-size: 100%;
						// }
					}

					.active1 {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;
					}

					.active2 {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;
					}

					.check {
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						position: absolute;
						bottom: 10rpx;
						right: 0;
					}
				}
			}
		}

		.text_2 {
			width: 93rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 15rpx 0 0 21rpx;
		}

		.section_1 {
			width: 100%;
			height: 50rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			margin: 28rpx 0 0rpx 20rpx;
			border-bottom: solid 2rpx #efefef;
		}

		.box_3 {
			height: 40rpx;
			background-size: 100% 100%;
			display: flex;
			flex-direction: row;
			// width: 150rpx;
		}

		.label_1 {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
		}

		.label_2 {
			width: 40rpx;
			height: 40rpx;
			margin-left: -6rpx;
			border-radius: 50%;
		}

		.label_3 {
			width: 40rpx;
			height: 40rpx;
			margin-left: -6rpx;
			border-radius: 50%;
		}

		.image-text_1 {
			width: 150rpx;
			height: 27rpx;
			margin-top: 6rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			margin-right: 40rpx;
		}

		.text-group_1 {
			width: 126rpx;
			height: 27rpx;
			overflow-wrap: break-word;
			color: rgba(40, 40, 40, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
		}

		.icon_2 {
			width: 7rpx;
			height: 14rpx;
			margin-top: 13rpx;
		}

		.section_2 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_3 {
			width: 47rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 42rpx 0 0 19rpx;
		}

		.text_4 {
			width: 82rpx;
			height: 26rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 24rpx 0 0 20rpx;
		}

		.section_3 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_5 {
			width: 47rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 39rpx 0 0 19rpx;
		}

		.text_6 {
			width: 82rpx;
			height: 26rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 24rpx 0 0 20rpx;
		}

		.section_4 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_7 {
			width: 95rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 39rpx 0 0 19rpx;
		}

		.image_2 {
			width: 151rpx;
			height: 151rpx;
			margin: 25rpx 0 0 18rpx;
		}


		.text_8 {
			width: 95rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 20rpx 0 0 19rpx;
		}

		.section_6 {
			width: 378rpx;
			height: 62rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			margin: 26rpx 0 27rpx 21rpx;
		}

		.button_1 {
			background-color: rgba(243, 243, 243, 1.000000);
			height: 62rpx;
			display: flex;
			flex-direction: column;
			width: 174rpx;
		}

		.text_9 {
			width: 48rpx;
			height: 24rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 19rpx 0 0 63rpx;
		}

		.button_2 {
			background-color: rgba(255, 65, 5, 0.100000);
			height: 62rpx;
			display: flex;
			flex-direction: column;
			width: 174rpx;
		}

		.text_10 {
			width: 73rpx;
			height: 24rpx;
			overflow-wrap: break-word;
			color: rgba(255, 98, 0, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 19rpx 0 0 51rpx;
		}

		.button_3 {
			width: 90%;
			height: 80rpx;
			position: absolute;
			bottom: 20rpx;
			background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));
			border-radius: 80rpx 80rpx;
			margin-left: 5%;
			color: rgba(255, 255, 255, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
		}
	}
</style>